export default function (babel) {
  const { types: t } = babel;
  
  return {
    name: "react-directives",
    visitor: {
      JSXAttribute(path) {
        if (path.node.name.name?.startsWith('r-')) {
          const directive = path.node.name.name;
          const condition = path.node.value?.expression;
          
          if (directive === 'r-if' && condition) {
            const jsxElement = path.findParent(p => p.isJSXElement());
            // 这行代码的作用是在Babel插件中查找当前JSX属性节点的最近的JSX元素父节点。
// 具体来说，`path.findParent` 是Babel AST路径对象的一个方法，它接受一个回调函数作为参数。
// 这个回调函数 `p => p.isJSXElement()` 用于判断当前遍历到的节点是否为JSX元素节点。
// 如果是，则返回该节点，否则继续向上查找其父节点，直到找到一个JSX元素节点或者到达根节点。
// 最后，将找到的JSX元素节点赋值给变量 `jsxElement`，以便后续对该节点进行操作。
            
            // 正确的转换方式
            jsxElement.replaceWith(
              t.jSXExpressionContainer(
                t.logicalExpression(
                  '&&',
                  condition,
                  jsxElement.node
                )
              )
            );
            
            // 移除原来的属性
            path.remove();
          }
        }
      }
    }
  };
}